<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax请求防抖</title>
</head>
<body>
加入防抖后的输入请求Ajax：
<br>
<input type="text" name="debounce" id="debounce">
</body>

<script src="debounce.js"></script>
<script>
    //模拟ajax请求
    function ajax({a,b}) {
        console.log('ajax request ' + a,b)
    }

    let inputDebounce = document.getElementById('debounce')
    let debounceAjax = debounce(ajax, 1000)
    inputDebounce.addEventListener('keyup', function (e) {
        let a= this.value
        let b = 'sss'
        debounceAjax({a,b})
    })


    /**
     * 代码说明：

     1.每一次事件被触发，都会清除当前的 timer 然后重新设置超时调用，即重新计时。
     这就会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发；

     2.只有当高频事件停止，最后一次事件触发的超时调用才能在delay时间后执行；

     效果：
     加入防抖后，当持续在输入框里输入时，并不会发送请求，
     只有当在指定时间间隔内没有再输入时，才会发送请求。

     如果先停止输入，但是在指定间隔内又输入，会重新触发计时。
     */


</script>

</html>